<template>
<div class="tags-nav">
    <!-- <div class="btn-con left-btn">
        <el-button type="text" icon="el-icon-caret-left" size="small" @click="handleScroll(240)"></el-button>
    </div>
    <div class="btn-con right-btn">
        <el-button type="text" icon="el-icon-caret-right" size="small" @click="handleScroll(-240)"></el-button>
    </div> -->
    <div class="btn-con close-btn">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <el-button type="text" icon="el-icon-arrow-down" size="small" slot="reference"></el-button>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="closeLeft"><i class="el-icon-back el-icon--right"></i>关闭左侧</el-dropdown-item>
            <el-dropdown-item command="closeRight"><i class="el-icon-right el-icon--right"></i>关闭右侧</el-dropdown-item>
            <el-dropdown-item command="closeOther"><i class="el-icon-close el-icon--right"></i>关闭其他</el-dropdown-item>
            <el-dropdown-item command="closeAll"><i class="el-icon-circle-close el-icon--right"></i>关闭所有</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
    </div>
    <div class="scroll-outer" ref="scrollOuter" @DOMMouseScroll="handlescroll" @mousewheel.passive="handlescroll" >
        <div ref="scrollBody" class="scroll-body" :style="{left: tagBodyLeft + 'px'}">
            <transition-group name="taglist-moving-animation">
                <el-tag  v-for="(item, index) in list" ref="tagsPageOpened" :closable="isClosable(item)" :key="`tag-nav-${index}`" :data-route-item="item" @click.native="handleClick({item:item.path,ifHover:item.ifHover,index})" @close="handleClose({index,data:item.path})" size="small" :type="isCurrentTag(item) ? 'info' : ''" :class="item.path==currentName?'focusBottom':'focusBottom1'" @mouseenter.native="enterHandler(index)" @mouseleave.native="outHandler(index)">
                    {{item.name}}
                </el-tag>
				<!-- <el-tag v-for="(item, index) in list" ref="tagsPageOpened" :closable="item.name !== '首页'" :key="`tag-nav-${index}`" :data-route-item="item" @click.native="handleClick({item:item.path,ifHover:item.ifHover,index})" @close="handleClose({index,data:item.path})" size="small" :type="isCurrentTag(item) ? 'info' : ''">
				    {{item.name}}
				</el-tag> -->
            </transition-group>
        </div>
    </div>
</div>
</template>

<script>
export default {
    name: 'TagsNav',
    props: {
        value: Object,
        list: {
            type: Array,
            default () {
                return []
            }
        },
        enter:{
            type:Function
        },
        out:{
            type:Function
        },
        closeHandler:{
            type:Function
        }  

    },
    data() {
        return {
            tagBodyLeft: 0,
            outerPadding: 4,
        }
    },
    computed: {
        currentRouteObj() {
            const {
                name,
                params,
                query,
                path
            } = this.value
            return {
                name,
                params,
                query,
                path
            }
        },
        currentName(){
            return  this.$store.state.app.currentPagePath;
        }
    },
    methods: {
        handleCommand(command){
           // alert(command)
           this.closeHandler(command)
        },
        isClosable(item){
            var isShow = false;
            if(item.ifHover)
            {
                isShow = true;
            }
            else if(item.name == '首页')
               {
                isShow = false;
               }
             else if(this.isCurrentTag(item)){
               isShow = true;
             }
             else{
                isShow = false;
             }   
             return isShow;
        },
        enterHandler(item){
            this.enter(item)
        },
        outHandler(item){
            this.out(item)
        },
        handlescroll(e) {
            var type = e.type
            let delta = 0
            if (type === 'DOMMouseScroll' || type === 'mousewheel') {
                delta = (e.wheelDelta) ? e.wheelDelta : -(e.detail || 0) * 80
            }
            this.handleScroll(delta)
        },
        handleScroll(offset) {

            const outerWidth = this.$refs.scrollOuter.offsetWidth
            const bodyWidth = this.$refs.scrollBody.offsetWidth
            if (offset > 0) {
                this.tagBodyLeft = Math.min(0, this.tagBodyLeft + offset)
            } else {
                if (outerWidth < bodyWidth) {
                    if (this.tagBodyLeft < -(bodyWidth - outerWidth)) {
                        this.tagBodyLeft = this.tagBodyLeft
                    } else {
                        this.tagBodyLeft = Math.max(this.tagBodyLeft + offset, outerWidth - bodyWidth)
                    }
                } else {
                    this.tagBodyLeft = 0
                }
            }
        },
        handleClose(current) {
            this.$emit('on-close',current)
        },
        handleClick(current) {
            this.$emit('input', current)
        },
        isCurrentTag(item) {
            return this.currentRouteObj.path == item.path
        },
        moveToView(tag) {
            const outerWidth = this.$refs.scrollOuter.offsetWidth
            const bodyWidth = this.$refs.scrollBody.offsetWidth
            // alert(outerWidth+"--"+bodyWidth)
            if (bodyWidth < outerWidth) {
                this.tagBodyLeft = 0
            } else if (tag.offsetLeft < -this.tagBodyLeft) {
                // 标签在可视区域左侧
                this.tagBodyLeft = -tag.offsetLeft + this.outerPadding
            } else if (tag.offsetLeft > -this.tagBodyLeft && tag.offsetLeft + tag.offsetWidth < -this.tagBodyLeft + outerWidth) {
                // 标签在可视区域
                this.tagBodyLeft = Math.min(0, outerWidth - tag.offsetWidth - tag.offsetLeft - this.outerPadding)
            } else {
                // 标签在可视区域右侧
                this.tagBodyLeft = -(tag.offsetLeft - (outerWidth - this.outerPadding - tag.offsetWidth))
            }
        },
        getTagElementByRoute(route) {
            var _this = this;
            _this.$nextTick(() => {
                _this.refsTag = _this.$refs.tagsPageOpened
                if(_this.refsTag){
                    _this.refsTag.forEach((item, index) => {
                        if (route.path == item.$attrs['data-route-item'].path) {
                            let tag = _this.refsTag[index].$el
                            _this.moveToView(tag)
                        }
                    });
               }
            });
        }
    },
    watch: {
        '$route'(to) {
            // console.log(to)
            this.getTagElementByRoute(to)
        }
    },
    mounted() {
        var _this = this;
        console.log(456,this.path)
        setTimeout(() => {
            _this.getTagElementByRoute(_this.$route)
        }, 200)
    }
}
</script>

<style lang="less">
@import './tags-nav.less';
</style>
